import QtQuick 2.3

import QtGraphicalEffects 1.0
import "./common/" as Common

Item {
  id:loginModel
  width:450
  height: 450

  signal signalQmlOptions(variant msg,string type);
  signal signalLoginEvent(string username,string password);


  Common.TipBox{
      id:msgBox
      width: 350
      height: 40
      color: "#ffffff"
      radius: 7
      y:-10
      visible:false
      second: 1500
      anchors.horizontalCenter: parent.horizontalCenter

  }
  Rectangle{
    id:butterfly
    width:430
    height: 450
    color: Qt.transparent
    border.color: Qt.transparent

    Common.ShadowRectangle{
          anchors.centerIn: parent
          width: 425
          height: 440
          color:"blue"
    }

    Rectangle{
        id:bgDv
        width:430
        height: 240
        z:1
        Image {
            id: bgImg
            width: 430
            height:240
            source: "qrc:/images/bg.jpg"    //加载图片

        }

        ToolBar{
            id:topBar
            width: parent.width
            height: 40
        }
        Common.DDText{
            id:logoName
            color: "#ffffff"
            text: qsTr("NeedPrint")
            font.bold: true
            horizontalAlignment: Text.AlignHCenter
            font.pixelSize:55
            y:80
            x:80

        }


    }
    Rectangle{
        width:430
        height: 219
        color:"#EBF2EF"
        anchors.top: bgDv.bottom
        anchors.topMargin: -10
        radius: 5

        z:0

        Row{
            id:userGroup
            width:350
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.top: parent.top
            anchors.topMargin: 40
            height: 40
//            Common.DDText{
//                id:userNameLabel
//                color: "#666666"
//                text: "用户名："
//                font.pixelSize:14
//                anchors.left: parent.left
//                anchors.verticalCenter: parent.verticalCenter
//            }
            Rectangle{
                id:userOrder
                height:40
                color:"#ffffff"
                radius: 4
                width: 350
                anchors.left: parent
                border.color: "#cccccc"
                anchors.verticalCenter: parent.verticalCenter
                anchors.leftMargin: 10
                Image {
                    id: userIcon
                    width: 25
                    height:25
                    source: "qrc:/images/usericon.png"    //加载图片
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.left: parent.left
                    anchors.leftMargin: 5

                }
                TextInput{
                    id:userName
                    width:300
                    height: 25
                    clip: true
                    text: "请输入商家文件处理权限账号"
                    anchors.left: userIcon.right
                    anchors.leftMargin: 5
                    y:userIcon.y+4
                    font.pixelSize: 18

                    color: "#cccccc"
                    font.bold: false
                    autoScroll: true
                    validator: RegExpValidator{regExp:/^\S+$/}
                    onFocusChanged: {

                        if(userName.focus === true && userName.text==="请输入商家文件处理权限账号"){
                             userName.color="#000000";
                             userName.text="";
                             userName.color="#000000";

                        }else if(userName.text===""){
                            userName.color="#cccccc";
                            userName.text="请输入商家文件处理权限账号";

                        }
                        if(userName.focus === true){
                            userOrder.border.color="#ff4400";
                        }else{
                            userOrder.border.color="#cccccc";
                        }

                    }
                }
            }

            //边框闪烁动画
            SequentialAnimation{
                id:userAnimation

                ColorAnimation{
                    target: userOrder
                    property: "border.color"
                    to: "#ff4400"
                    duration: 200
                }
                ColorAnimation{
                    target: userOrder
                    property: "border.color"
                    to: "#cccccc"
                    duration: 200
                }
                ColorAnimation{
                    target: userOrder
                    property: "border.color"
                    to: "#ff4400"
                    duration: 200
                }
            }
        }

        Row{
            id:passGroup
            width:350
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.top: userGroup.bottom
            anchors.topMargin: 10
            height: 40
//            Common.DDText{
//                id:passNameLabel
//                color: "#666666"
//                text: "密   码："
//                font.pixelSize:14
//                anchors.left: parent.left
//                anchors.verticalCenter: parent.verticalCenter
//            }
            Rectangle{
                id:passOrder
                height:40
                color:"#ffffff"
                radius: 4
                width: 350
                anchors.left:parent
                anchors.leftMargin: 12
                border.color: "#cccccc"
                anchors.verticalCenter: parent.verticalCenter
                Image {
                    id: passIcon
                    width: 25
                    height:25
                    source: "qrc:/images/passicon.png"    //加载图片
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.left: parent.left
                    anchors.leftMargin: 5

                }
                TextInput{
                    id:passWord
                    width:270
                    height: 30
                    clip: true
                    anchors.left: passIcon.right
                    anchors.leftMargin: 5
                    y:passIcon.y+4
                    font.pixelSize: 18
                    text:"请输入密码"
                    color: "#cccccc"
                    font.bold: false
                    autoScroll: true
                    verticalAlignment: passWord.verticalCenter

                    validator: RegExpValidator{regExp:/^\S+$/}
                    onFocusChanged: {
                        if(passWord.focus === true && passWord.text==="请输入密码"){
                             passWord.color="#000000";
                             passWord.text="";
                             passWord.echoMode= TextInput.Password;

                        }else if(passWord.text===""){
                            passWord.echoMode= TextInput.Normal;
                            passWord.color="#cccccc";
                            passWord.text="请输入密码";

                        }
                        if(passWord.focus === true){
                            passOrder.border.color="#ff4400";
                        }else{
                            passOrder.border.color="#cccccc";
                        }

                    }

                }
            }

            //边框闪烁动画
            SequentialAnimation{
                id:passAnimation

                ColorAnimation{
                    target: passOrder
                    property: "border.color"
                    to: "#ff4400"
                    duration: 200
                }
                ColorAnimation{
                    target: passOrder
                    property: "border.color"
                    to: "#cccccc"
                    duration: 200
                }
                ColorAnimation{
                    target: passOrder
                    property: "border.color"
                    to: "#ff4400"
                    duration: 200
                }
            }
        }

        Row{
            width:350
            height: 45
            anchors.top: passGroup.bottom
            anchors.topMargin: 10
            Common.CustomColorButton{
                id:loginButton
                buttonBorderColor: "#09A3DC"
                buttonDefault: "#09A3DC"
                buttonWidth: 350
                buttonHeight: 35
                anchors.left: parent.left
                anchors.leftMargin: 40
                anchors.verticalCenter: parent.verticalCenter
                anchors.horizontalCenter: parent.horizontalCenter
                buttonRadius: 4
                buttonHoverColor: "#3CC3F5"

                onButtonClick: {

                    passOrder.border.color="#cccccc";
                    userOrder.border.color="#cccccc";
                    passWord.focus = false;
                    userName.focus = false;
                    if(userName.text === "" || userName.text === "请输入商家文件处理权限账号"){
                         userAnimation.start();
                         userName.focus = true;
                         userOrder.border.color="#cccccc";
                         msgBox.show("error","请填写商家文件处理账号!");
                         return false;
                    }
                    if(passWord.text === "" || passWord.text === "请输入密码"){
                         passAnimation.start();
                         passWord.focus = true;
                         passOrder.border.color="#cccccc";
                         msgBox.show("error","请填写用户密码!");
                         return false;
                    }

                    console.log(userName.text);
                    console.log(passWord.text);
                    signalLoginEvent(userName.text,passWord.text);
                    return true;
                }
                Common.DDText {
                        id:placeNum
                        text: "登   陆"
                        color: "white"
                        font.pixelSize: 15
                        font.bold: false
                        horizontalAlignment: Text.AlignHCenter
                        verticalAlignment: Text.AlignVCenter
                        anchors.left: loginButton.left
                        anchors.leftMargin: 150
                        anchors.top: loginButton.top
                        anchors.topMargin: 8
                    }
            }
        }

    }
  }
   Connections{
          //qml 连接 c++ 信号
          target:loginCtrl
          onLoginSignal:function(data){

            var JsonObject = JSON.parse(data);

            if(JsonObject.error_code === 0){
                 msgBox.show("success",JsonObject.msg);
            }else{
                 msgBox.show("error",JsonObject.msg);
            }
            loginCtrl.close();
            contrView.show();
          }
    }
}
